<template>
	<view class="" style="padding-bottom: 150rpx;">
		<view style="position: relative;">
			<swiper style="height:800rpx">
				<swiper-item v-for="(item,index) in info.sliderPicUrls" :key="index">
					<view class="item">
						<image :src="item" mode="aspectFill" style="width: 100%;display: block;height:800rpx;">
						</image>
					</view>
				</swiper-item>
			</swiper>
			<view @click="toBack" style="position: absolute;top: 30rpx;left: 30rpx;">
				<image class="w36 h36" src="../../static/image/ic-back.png"></image>
			</view>
		</view>

		<view class="p12 bg-white">
			<view class="u-flex u-f-jsb">
				<view class="fz18 c3 ">
					{{info.propertyName}}

				</view>
				<view class="u-flex">
					<image @click="toShare" src="../../static/image/ic-share.png"
						style="width: 72rpx;height: 72rpx;margin-right: 20rpx;"></image>
					<image v-if="info.isCollect" @click="toUnCorrect" src="../../static/image/ic-correct-on.png"
						style="width: 72rpx;height: 72rpx;"></image>
					<image v-else @click="toCorrect" src="../../static/image/ic-correct.png"
						style="width: 72rpx;height: 72rpx;"></image>
				</view>
			</view>
			<view v-if="info.videoAttachment" class="btn p10 pt5 pb5 brs5 mb10"
				style="background: rgba(242,70,70,0.1);color:#F24646;" @click="showVideo=true">房源视频</view>
			<view class="c3">地址</view>
			<view class="fz12 c9 mt6">{{info.detailedAddress}}</view>
			<view class="u-flex u-f-jsb u-f-justify mt22">
				<view class="fz12 c6" v-if="info.totalShares">
					<view class="fz16 c3">{{info.totalShares}}</view>
					<view class="mt6">份额</view>
				</view>
				<view class="fz12 c6">
					<view class="fz16 c3">{{info.virtualInvestorsCount+info.actualInvestorsCount}}</view>
					<view class="mt6">投资者</view>
				</view>
				<view class="fz12 c6" style="min-width: 200rpx;" v-if="info.totalShares">
					<view class="fz16 c3">
						<u-line-progress :show-percent="false" height="16" active-color="#F24646"
							:percent="(info.totalShares-info.remainingShares)/info.totalShares*100"></u-line-progress>
					</view>
					<view class="mt6 u-flex u-f-jsb">待认领房东<span>{{info.remainingShares}}/{{info.totalShares}}</span>
					</view>
				</view>
			</view>
			<view class="u-flex u-f-jsb u-f-justify mt25">
				<view class="fz12 c6" v-if="info.contractTotalPrice">
					<view class="fz16 c3">￥{{info.contractTotalPrice}}</view>
					<view class="mt6">承包总价</view>
				</view>
				<view class="fz12 c6" v-if="info.rentAmount">
					<view class="fz16 c3">￥{{info.rentAmount}}</view>
					<view class="mt6">月租</view>
				</view>
				<view class="fz12 c6" v-if="info.area">
					<view class="fz16 c3">{{info.area}}㎡</view>
					<view class="mt6">面积</view>
				</view>
			</view>
			<view class="u-flex mt25" v-if="info.investmentReason">
				<view></view>
				<view class="u-f1 fz13 c3">
					<view class="c6">为何投资</view>
					<view class=" mt6">{{info.investmentReason}}</view>
				</view>
			</view>
			<view class="u-flex mt14" v-if="info.returnPolicy">
				<view></view>
				<view class="u-f1 fz13 c3">
					<view class="c6">退货策略</view>
					<view class=" mt6">{{info.returnPolicy}}</view>
				</view>
			</view>
		</view>
		<view class="p12" v-if="info.propertyDescription">
			<view class="fz14 c3">关于此房源</view>
			<view class="c6 fz12 mt10">{{info.propertyDescription}}
			</view>
		</view>
		<view class="bg-white p12">

			<view class="u-flex" v-if="info.trafficConditions">
				<view></view>
				<view class="u-f1 fz13 c3">
					<view class="c6">交通状况</view>
					<view class=" mt6">{{info.trafficConditions}}</view>
				</view>
			</view>
			<view class="u-flex mt14" v-if="info.surroundingConditions">
				<view></view>
				<view class="u-f1 fz13 c3">
					<view class="c6">周边状况</view>
					<view class=" mt6">{{info.surroundingConditions}}</view>
				</view>
			</view>
		</view>
		<template v-if="info.relatedFileList && info.relatedFileList.length>0">
			<view class="p12">
				<view class="fz14 c3">文件</view>

			</view>

			<view class="bg-white p12">
				<view>
					<view @click="openFiles(item.url)" class="u-flex mb12" v-for="(item,index) in info.relatedFileList"
						:key="index">
						<image src="../../static/image/ic-file.png" class="w36 h36" mode="aspectFill"></image>

						<view class="ml5">{{item.name}}</view>
					</view>
				</view>




			</view>
		</template>

		<view class="mt15" v-if="userInfo.memberRole==3">
			<u-tabs :list="list" :is-scroll="false" active-color="#F24646" :current="current" @change="change"></u-tabs>
			<view class="bg-white p12">

				<view class="" v-if="current==0">

					<view class=" " v-for="(item,index) in peopleList" :key="index">
						<view class="bg-white mb15 bm pb15">
							<view class="fz14 u-f-jsb u-flex  pt8 pb8">创建日期<span
									class="status fz12">{{item.createTimeFormat}}</span>
							</view>

							<view class="fz13 u-f-jsb u-flex pt8 pb8">
								租客姓名<span class="">{{item.tenantName}}</span>
							</view>
							<view class="fz13 u-f-jsb u-flex pt8 pb8">
								联系方式<span class="">{{item.phoneNumber}}</span>
							</view>
							<view class="fz13 u-f-jsb u-flex pt8 pb8">
								开始日期<span class="">{{item.contractStartDateFormat}}</span>
							</view>
							<view class="fz13 u-f-jsb u-flex pt8 pb8">
								结束日期<span class="">{{item.contractEndDateFormat}}</span>
							</view>
							<view class="fz13 u-f-jsb u-flex pt8 pb8">
								押金金额<span class="">￥{{item.depositAmount}}</span>
							</view>
							<view class="fz13 u-f-jsb u-flex pt8 pb8">
								租金金额<span class="">￥{{item.monthAmount}}</span>
							</view>
							<view class="fz13 u-f-jsb u-flex pt8 pb8" v-if="item.contractAttachmentName"
								@click="openFiles(item.contractAttachment)">
								租赁合同<span class="" style="color: #3C81F8;">{{item.contractAttachmentName}}</span>
							</view>
							<view class="fz13 u-f-jsb u-flex pt8 pb8" v-if="item.refundDate">
								退租日期<span class="">{{item.refundDate}}</span>
							</view>
						</view>

					</view>
					<view class="u-f-justify fz12 c9" @click="toPeople" v-if="peopleTotal>3">查看更多</view>
				</view>
				<view class="" v-if="current==1">

					<view class=" " v-for="(item,index) in moneyList" :key="index">
						<view class="bg-white mb15 bm pb15">
							<view class="fz14 u-f-jsb u-flex  pt8 pb8">收租日期<span
									class="status fz12">{{item.rentCollectionDateFormat}}</span>
							</view>


							<view class="fz13 u-f-jsb u-flex pt8 pb8">
								业务类型<span class="">{{item.bizTypeDesc}}</span>
							</view>
							<view class="fz13 u-f-jsb u-flex pt8 pb8">
								租金<span class="">￥{{item.rent}}</span>
							</view>
							<view class="fz13 u-f-jsb u-flex pt8 pb8">
								实收租金<span class="">￥{{item.paidUpRent}}</span>
							</view>
							<view class="fz13 u-f-jsb u-flex pt8 pb8">
								审核日期<span class="">{{item.approvalTimeFormat}}</span>
							</view>

						</view>

					</view>
					<view class="u-f-justify fz12 c9" @click="toMoney" v-if="moneyTotal>3">查看更多</view>
				</view>
				<view v-if="current==2">
					<u-parse :html="info.ownerInfo"></u-parse>

				</view>
			</view>
		</view>
		<view class="p14">
			<u-parse :html="info.content"></u-parse>
		</view>
		<view class="btn-fu" @click="toApply" v-if="userInfo.memberRole==1 || !userInfo.memberRole">认证投资人<u-icon
				class="fz16" name="arrow-right" color="#fff"></u-icon></view>
		<view class="fixed-bottom u-flex">
			<view class="btn mr15" style="background: rgba(242,70,70,0.1);color:#F24646;min-width: 200rpx;"
				@click="toArticle(73)">购买流程</view>
			<view class="btn" @click="toBooking" style="background: #F24646;width: 100%;">买入</view>
		</view>

		<u-popup v-model="showVideo" mode="center" border-radius="10" :closeable="false">
			<view style="width:750rpx">
				<view class="p15">

					<view>
						<video style="width: 100%;" :src="info.videoAttachment"></video>
					</view>
					<view class="u-f-justify">
						<view class="btn-sure btn-sure1 fz14 mt15" @click="showVideo=false">关闭</view>
					</view>
				</view>
			</view>
		</u-popup>
		<u-popup v-model="showTips" mode="center" border-radius="10" :closeable="false">
			<view style="padding: 40rpx 30rpx;width: 600rpx;">
				<view class="u-flex u-f-justify"> <u-icon class="fz30" name="info-circle-fill" color="#E88B8B"></u-icon>
				</view>
				<view v-if="applyStatus==0">
					<view class="fz16 mt20 mb20" style="text-align: center;line-height: 56rpx;">
						您还不是房东<br /> 无法进行购买！</view>
					<view class="btn-sure fz14" @click="toApply">成为房东</view>
				</view>
				<view v-if="applyStatus==1">
					<view class="fz16 mt20 mb20" style="text-align: center;line-height: 56rpx;">
						您的申请已提交<br /> 请耐心等待！</view>
					<view class="btn-sure fz14" @click="toApply">去查看</view>

				</view>
				<view v-if="applyStatus==3">
					<view class="fz16 mt20 mb20" style="text-align: center;line-height: 56rpx;">
						您的申请被驳回</view>
					<view class="btn-sure fz14" @click="toApply">去查看</view>
				</view>
				<view class="btn-sure btn-sure1 fz14 mt15" @click="showTips=false">关闭</view>
			</view>
		</u-popup>

		<u-popup v-model="showShare" mode="center" border-radius="10" :closeable="false">
			<view class="p15" style="width: 600rpx;">

				<!-- 自定义生成海报组件 -->
				<!-- @success：成功事件  imgSrc：图片地址 QrSrc：二维码图片地址  Title：标题 PriceTxt：价格 OriginalTxt：原始价格 LineType -->
				<!-- <cc-poster @success="posterSuccess" :imgSrc="info.mainImage" :QrSrc="erweimapath" :Title="info.propertyName"
					:OriginalTxt="info.propertyDescription" :LineType="false"></cc-poster> -->
				<view>
					<image :src="info.mainImage" mode="widthFix" style="width: 100%;max-height: 500rpx;"></image>
				</view>
				<view class="fz15 c3 mt10">{{info.propertyName}}</view>
				<view class="fz12 c9 p10 mt10" style="background: #F8F8F8;">{{info.propertyDescription}}</view>

				<view class="u-flex u-f-jsb fz12 mt30">
					<view>

						<view>
							我的邀请码
							<view class="fz24 u-font-bold" style="color: #F24646;">{{userInfo.recommendOneselfCode}}
							</view>
						</view>
						<view class="u-flex mt10">
							<u-avatar size="50" :src="userInfo.avatar"></u-avatar>

							<view class="ml5">{{userInfo.name}}</view>
						</view>
					</view>
					<view style="text-align: center;">
						<image src="https://www.szchangen.com/admin-api/infra/file/18/get/app-code.png"
							style="display: block;width: 134rpx;height: 134rpx;margin: 0 auto;"></image>
						<view class="fz12 c9">扫描二维码 下载APP</view>
					</view>
				</view>
			</view>
		</u-popup>


	</view>
</template>

<script>
	export default {
		data() {
			return {
				applyStatus: 0,
				showShare: false,
				showTips: false,
				userInfo: {},
				info: {
					pictures: [{}]
				},
				peopleTotal:0,
				moneyTotal:0,
				current: 0,
				list: [{
					name: '租客信息',
					id: '1',
				}, {
					name: '收益情况',
					id: '2'
				}, {
					name: '产权人信息',
					id: '3'
				}, ],
				showVideo: false,
				haibaoImg: null,
				modalName: '',
				peopleList: [],
				moneyList: [],
				haibaoShow: false,
				//二维码图片地址
				erweimapath: "https://www.xinhuanet.com/politics/2016-07/19/5119875106653616178_11n.jpg",
				goods: {
					"itemid": "2nNozWXiotnRwxGUakBuXUD-0npyN5GSNmYDb0pgTxw",
					"itemtitle": "开丽产妇卫生巾产后专用刀纸月子安睡裤计量卫生巾孕妇用品安心裤",
					"itemshorttitle": "开丽产妇卫生巾月子安睡裤计量卫生",
					"itemdesc": "【开丽旗舰店】安心裤型亲肤面料，产后专用不勒刀口，免穿设计方便，超强吸收加长加大款，产妇的优质选择！【赠运费险】",
					"itemprice": "39.90",
					"todaysale": "3",
					"itempic": "https://img.alicdn.com/imgextra/i1/2742920221/O1CN01nFqqJ41DVGNfjYMmu_!!2742920221.jpg",
					"itemendprice": "29.91",

				}

			}
		},
		onLoad(e) {
			this.getInfo(e.id)
		},
		onShareAppMessage(e) {},
		// #ifdef MP-WEIXIN
		onShareTimeline() {
			return this.mpShare
		},
		// #endif
		onShow() {},

		methods: {

			toPeople() {
				uni.navigateTo({
					url: `/pages/house/people?id=${this.info.id}&houseName=${this.info.propertyName}`
				})
			},
			toMoney() {
				uni.navigateTo({
					url: `/pages/house/money?id=${this.info.id}&houseName=${this.info.propertyName}`
				})
			},
			posterSuccess(haibaoImg) {
				this.haibaoImg = haibaoImg;
			},
			change(e) {
				this.current = e
			},
			showModal() {
				if (!this.haibaoImg) {
					this.haibaoShow = true;

					uni.showLoading({
						title: '海报生成中...'
					});

				} else {
					this.modalName = 'Image';
				}
			},
			openFiles(url) {
				uni.showLoading({
					title: '下载中...'
				});
				uni.downloadFile({
					url: url, //源文件地址
					success(res) {
						uni.hideLoading()
						uni.openDocument({
							filePath: res.tempFilePath,
							// fileType: "pdf",
							showMenu: true,
							success: function(res) {
								console.log('文件打开成功');
							},
							fail: function(err) {
								console.error('文件打开失败', err);
							}
						})
					},
					complete: () => {

						uni.hideLoading()
					}
				})
			},
			toShare() {




				if (this.$db.get("userToken")) {
					this.$api.memberInfo({}, res => {
						if (res.code == 200) {
							this.userInfo = res.data
							this.showShare = true
						}
					})

				} else {

					this.$common.errorToShow('请先登录！')
					uni.navigateTo({
						url: '/pages/login/index'
					})
				}
			},
			toBack() {
				uni.navigateBack()
			},
			toCorrect() {
				// collectCancel
				this.$api.collectAdd({
					houseId: this.info.id
				}, res => {
					if (res.code == 200) {
						this.$common.errorToShow('收藏成功')
						this.getInfo(this.info.id)
					}
				})
			},
			toUnCorrect() {
				this.$api.collectCancel({
					houseId: this.info.id
				}, res => {
					if (res.code == 200) {
						this.$common.errorToShow('取消成功')
						this.getInfo(this.info.id)
					}
				})
			},
			getInfo(id) {
				if (this.$db.get("userToken")) {
					this.$api.memberInfo({}, res => {
						if (res.code == 200) {
							this.userInfo = res.data
						}
					})

					this.$api.depositList({
						pageNo: this.page,
						pageSize: 3,
						propertyId: id,
					}, res => {
						if (res.code) {
							this.peopleList = res.data.list
							this.peopleTotal=res.data.total

						}
					})

					this.$api.incomeList({
						pageNo: this.page,
						pageSize: 3,
						// userType:3,
						propertyId: id,
					}, res => {
						if (res.code) {
							this.moneyList = res.data.list
							this.moneyTotal=res.data.total
						}
					})

				}
				this.$api.getHousingDetail({
					id
				}, res => {
					if (res.code == 200) {
						if (res.data.sliderPicUrls.length <= 0) {
							res.data.sliderPicUrls = [res.data.mainImage]
						}
						this.info = res.data
					}
				})


			},
			toApply() {
				uni.navigateTo({
					url: '/pages/landlord/apply'
				})
			},
			toArticle(id) {
				uni.navigateTo({
					url: '/pages/single/single?id=' + id
				})
			},
			toUrl() {

				this.$api.productCheck({
					propertyId: this.info.id
				}, (res) => {
					if (res.code == 200) {
						
						uni.navigateTo({
							url: '/pages/product/booking?id=' + this.info.id
						})
					}else{
						
							this.$common.errorToShow(res.message)
					}
				})
			},
			toBooking() {
				if (this.userInfo.memberRole == 3) {
					this.toUrl()
					return
				}
				this.$api.getSubmit({
					role: 3
				}, (res) => {
					if (res.code == 200) {

						if (!res.data) {
							this.showTips = true
							this.applyStatus = 0
						} else {

							if (res.data) {

								this.applyStatus = res.data.auditStatus
								if (this.applyStatus != 2) {
									this.showTips = true
								} else {
									this.toUrl()
								}
							}
						}
					}
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	page {
		// background: #fff;
	}

	.btn-sure {

		width: 100%;
		height: 88rpx;
		text-align: center;
		color: #fff;
		line-height: 88rpx;
		background: #F24646;

		&.btn-sure1 {
			background: rgba(242, 70, 70, 0.1);
			color: #F24646;
		}
	}

	.btn-fu {
		background: #F24646;
		color: #fff;
		position: fixed;
		bottom: 200rpx;
		right: 0;
		border-radius: 50rpx 0 0 50rpx;
		z-index: 10;
		padding: 20rpx;
		font-size: 20rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		text-align: center;
	}
</style>